<template>
  <div class="system-log-container">
    <div class="spaceForm">
      <el-form :inline="true" label-width="60px" :model="queryForm">
        <el-form-item>
          <el-select
            v-model="queryForm.group_id"
            :clearable="true"
            placeholder="分组"
            @change="queryData"
          >
            <el-option
              v-for="item in group"
              :key="item.tt_group_id"
              :label="item.group_name"
              :value="item.tt_group_id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="queryForm.status"
            :clearable="true"
            placeholder="状态"
            @change="queryData"
          >
            <el-option label="房间锁" value="room" />
            <el-option label="公区锁" value="pub" />
            <el-option label="低电量锁" value="low_battery" />
            <el-option label="未绑定房间" value="no_bind_room" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="queryForm.keyword"
            clearable
            placeholder="请输入关键词查询"
            @keyup.enter.native="queryData"
            @clear="queryData"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="queryData">
            查询
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        label="ID"
        prop="lock_id"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="名称"
        prop="lock_alias"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="编号"
        prop="lock_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="类型"
        prop="lock_type_name"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="分组"
        prop="group_name"
        show-overflow-tooltip
      />
      <el-table-column align="center" label="电量">
        <template #default="{ row }">
          <div>{{ row.electric_quantity }}%</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="绑定网关">
        <template #default="{ row }">
          <div v-if="row.has_gateway == 0">否</div>
          <div v-else>是</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="关联房间"
        prop="room_address"
        show-overflow-tooltip
      />
      <template #empty>
        <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.page"
      :layout="layout"
      :page-size="queryForm.perpage"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { lockList } from '@/api/device'
import { getgroup } from '@/api/group'
export default {
  name: 'lock',
  data() {
    return {
      list: [],
      listLoading: true,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      group: [],
      queryForm: {
        status: '',
        group_id: '',
        keyword: '',
        page: 1,
        perpage: 10,
      },
    }
  },
  created() {
    this.fetchData()
    this.getGroup()
  },
  methods: {
    handleSizeChange(val) {
      this.queryForm.perpage = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.queryForm.page = val
      this.fetchData()
    },
    queryData() {
      this.queryForm.page = 1
      this.fetchData()
    },
    async fetchData() {
      this.listLoading = true
      const {
        data: { items, total },
      } = await lockList(this.queryForm)
      this.list = items
      this.total = total
      this.listLoading = false
    },
    async getGroup() {
      const { data } = await getgroup({})
      this.group = data
    },
  },
}
</script>
<style lang="scss" scoped>
.spaceForm {
  .el-select {
    width: 130px;
  }
}
</style>